<template>
  <section class="layer_select_wrap">
    <div class="Default_layer_wrap layer_select_cont">
      <h3>默认</h3>
      <el-checkbox-group v-model="defaultLayerSelect">
        <el-checkbox
          v-for="(item, index) in defaultLayerList"
          :key="index"
          :label="item.layerName"
          @change="selectDefaultLayer"
          >{{ item.layerName }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
    <div class="custom_layer_wrap layer_select_cont">
      <h3>自定义</h3>
      <el-radio-group v-model="customLayerSelect">
        <el-radio
          v-for="(item, index) in customLayerList"
          :key="index"
          :label="item.id"
          @change="selectCustomLayer"
        >
          {{ item.layerName }}
        </el-radio>
      </el-radio-group>
    </div>
  </section>
</template>

<script setup>
import { ref } from "vue";
// 组件传参
import mittBus from "@/utils/mittBus"; // mitt
// api相关
import { apiCommon } from "@/utils/index.js";
import * as gisApi from "@/api/gis/gis";

const defaultLayerList = ref([]);
const customLayerList = ref([]);

let defaultLayerSelect = ref([]); // 默认[多选]
let customLayerSelect = ref(""); // 自定义[单选]

// poxy对象
const { proxy } = getCurrentInstance();

/**
 * 接收其他组件派发的方法
 */
// 通知图层列表刷新
mittBus.on("reloadLayerSelect", () => {
  // console.log("通知图层列表刷新");

  initLayerData();
});

const selectDefaultLayer = (val) => {
  // console.log(val, defaultLayerSelect.value)

  mittBus.emit("selectDefaultLayer", defaultLayerSelect.value);
};

const selectCustomLayer = async (id) => {
  // console.log(val, customLayerSelect.value, val)

  let params = {
    id,
  };
  // console.log(id)

  proxy.$modal.loading("正在请求，请稍候...");
  let customLayerFile = await apiCommon(gisApi.getGisLayercontent, params);
  proxy.$modal.closeLoading();
  // console.log(customLayerFile)

  // loadKML(customLayerFile)
  mittBus.emit("loadKML", customLayerFile);
};

// 初始化图层管理
const initLayerData = async () => {
  try {
    let layerData = await apiCommon(gisApi.gueryGisLayerList);
    layerData = layerData.data;

    const defaultLayerListData = layerData.defaultLayerList;
    const customLayerListData = layerData.customLayerList;

    defaultLayerList.value = defaultLayerListData;
    customLayerList.value = customLayerListData;

    defaultLayerSelect.value = [
      defaultLayerList.value[0].layerName,
      defaultLayerList.value[1].layerName,
    ]; // 默认[多选]
  } catch (e) {
    console.warn(e);
  }
};
initLayerData();
</script>

<style lang="scss" scoped>
.layer_select_wrap {
  position: fixed;
  margin-top: 12px;
  padding: 10px;
  width: 255px;
  height: 72vh;
  background: rgb(255 255 255 / 80%);
  border-radius: 10px;

  .layer_select_cont {
    margin-left: 12px;
    margin-top: 25px;

    &:not(:last-child) {
      // margin-bottom: 30px;
    }

    h3 {
      margin-bottom: 5px;
      font-size: 15px;
    }

    &.Default_layer_wrap {
      .el-checkbox-group {
        margin-top: 15px;

        .el-checkbox {
          display: block;
        }
      }
    }

    &.custom_layer_wrap {
      .el-radio-group {
        margin-top: 15px;

        :deep .el-radio {
          display: block;
          width: 100%;

          .el-radio__label {
            white-space: initial;
            line-height: 25px;
          }
        }
      }
    }
  }
}
</style>
